<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <%@ include file="/WEB-INF/views/modules/commons/head.jsp" %>
    <!-- 组件的css -->
    <link rel="stylesheet" href="<s:url value="/assets/web/common/lulu_zujian/ui.css"></s:url>">
    <!-- 消息列表 CSS -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/user/userlist.css"></s:url>">
    <style>
        /* 公用边距 */
        #content-main {
            padding: 50px 20px 0;
            position: relative;
        }
        .export-excel{
            position: absolute;
            top:10px;
            right:6%;
        }
        .export-excel>input{
            height: 35px;
        }
    </style>
    <title>消息列表</title>
</head>

<body class="bgcolor">
<%@ include file="/WEB-INF/views/modules/commons/nav.jsp" %>
<%@ include file="/WEB-INF/views/modules/commons/menu.jsp" %>
<table></table>

<div class="av row J_mainContent" id="content-main">
    <div class="export-excel">
        <input type="text" id="J-xl-1" placeholder="请输入开始时间">
        <input type="text" id="J-xl-2" placeholder="请输入结束时间">
        <button id="export-table" class="btn btn-success btn-sm">导出到Excel</button>
    </div>
    <div class="user-manger" style="display: block;">
        <%-- <div class="container">
            <ul class="project-btn">
                <li class="primary">添加用户</li>
                <li class="warning">查询用户</li>
                隐藏查询总页数
                <li class="pages" style="display: none;"></li>
                隐藏修改用户当前页
                <li id="page" style="display: none;"></li>
            </ul>
        </div> --%>
        <div class="container">
            <table class="project-info">
                <thead>
                <tr>
                    <th>项目名</th>
                    <th>类别</th>
                    <th>收件单位</th>
                    <th>收件人</th>
                    <th>电话号码</th>
                    <th>短信内容</th>
                    <th>日期</th>
                    <th>时间</th>
                </tr>
                </thead>
                <tbody id="main">
                </tbody>
            </table>
        </div>

        <div class="footer">
            <ul class="pagination" id="pagination0"></ul>
        </div>

        <div class="shade"></div>

        <div class="model-container">
            <!-- 查询模块 -->
            <div class="queryuser" style="display: none;">
                <p class="title">查询用户
                    <span>&times;</span>
                </p>

                <div class="text-center  form-2">
                    <div>
                        <input type="text" name="name" placeholder="请输入姓名">
                    </div>
                    <div>
                        <input type="text" name="phone" placeholder="请输入电话号码">
                    </div>
                    <div>
                        <select name="branch" placeholder="责任单位" class="res-dept-1">
                            <option value="">责任单位</option>

                        </select>
                    </div>
                    <div>
                        <select name="role" placeholder="角色" class="role-1">
                            <option value="">角色</option>
                            <option value="领导">领导</option>
                            <option value="经办人">经办人</option>
                            <option value="责任人">责任人</option>
                        </select>
                    </div>
                    <button id="queryuser">查询用户</button>
                </div>
            </div>


        </div>
    </div>
</div>
<%@ include file="/WEB-INF/views/modules/commons/foot.jsp" %>
<script src="<s:url value="/assets/web/common/date/laydate.dev.js"></s:url>"></script>
<script>
    $(function () {
        laydate({
            elem: '#J-xl-1',
        });
        laydate({
            elem: '#J-xl-2',
        });
        $("#export-table").click(function () {
            var beginDate = $("#J-xl-1").val();
            var endDate = $("#J-xl-2").val();
            var url ="/sysMessageManger/download?beginDate="+beginDate+"&endDate="+ endDate;
            window.open(url);
        });

    })

    <%--分页请求--%>
    var pages = $('#pagination0').jqPaginator({
        totalPages: ${totalPage},
        visiblePages: 5,
        currentPage: 1,
        first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
        last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
        page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
        onPageChange: function (num) {
            $('#text').html('当前第' + num + '页');
            $.ajax({
                type: "POST",
                url: "/sysMessageManger/list",
                dataType: "json",
                data: ({"page": num }),
                success: function (model) {
                    var html = "";
                    for (var i = 0; i < model.model.length; i++) {
                        var list = model.model[i];
                        var type = "";
                        if (list.type == 0) {
                            type = "节点确认消息";
                        } else if (list.type == 1) {
                            type = "任务开始消息";
                        } else if (list.type == 2) {
                            type = "逾期消息";
                        }else if(list.type == 3){
                            type = "预警消息";
                        }
                        html += "<tr class =\"" + i + "\">" + "<td>" + list.projectName
                                + "</td>" +
                                "+<td>" + type + "</td>" +
                                "+<td>" + list.resDept + "</td>" +
                                "+<td>" + list.recipients + "</td>" +
                                "+<td>" + list.phone + "</td>" +
                                "+<td>" + list.text + "</td>" +
                                "+<td>" + list.createDate + "</td>" +
                                "+<td>" + list.createTime + "</td>" + +"</tr>";

                    }
                    $("#main").html(html);
                    $("#page").html(num);
                },
                error: function (model) {

                }
            })
        }

    });

    <%--查询用户请求--%>
    $(function () {
        $("#queryuser").click(function () {
            $('#pagination0').jqPaginator({
                totalPages: 1,
                visiblePages: 5,
                currentPage: 1,
                first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
                prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
                next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
                last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
                page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                onPageChange: function (num) {
                    $('#text').html('当前第' + num + '页');
                    $.ajax({
                        type: "GET",
                        url: "/hardWork/go/lists",
                        dataType: "json",
                        data: {page: num - 1},
                        success: function (model) {
                            var html = "";
                            for (var i = 0; i < model.model.length; i++) {
                                var list = model.model[i];
                                html += "<tr>" + "<td>" + list.name
                                        + "</td>" +
                                        "+<td>" + list.phone + "</td>" +
                                        "+<td>" + list.branch + "</td>" +
                                        "+<td>" + list.role + "</td>"
                                        + "<td class=\"delUser\" data-sysId=\"" + list.sysId + "\">删除用户</td>" +
                                        "<td class=\"update\" data-sysId=\"" + list.sysId + "\" data-branch=\"" + list.branch + "\" data-name=\"" + list.name + "\" data-phone=\"" + list.phone + "\">修改用户</td>"
                                        + "</tr>";
                            }
                            $(".shade").fadeOut(1000);
                            $(".model-container").fadeOut(1000);
                            $("#main").html(html);
                            //赋值总页数
                            $(".pages").html(model.totalPage);
                            pagg = Number($(".pages").html());
                            console.log(pagg);
                            //调用分页插件修改查询总页数
                            $('#pagination0').jqPaginator('option', {
                                totalPages: pagg,
                            });
                        },
                        error: function (model) {

                        }
                    })
                }
            });
        });
    })


    //模态框设置节点
    $(function () {
        //浏览器大小发生改变
        $(window).resize(function () {
            showShade();
        });

        //模态框出现
        // 添加用户
        $(".primary").bind("click", function () {
            $(".shade").fadeIn(1000);
            $(".model-container").fadeIn(1000);
            showShade();
            $(".adduser").show();
            $(".updateuser").hide();
            $(".queryuser").hide();
            $(".deleteUser").hide();
            showShade();

        });

        //查询用户
        $(".warning").bind("click", function () {
            $(".shade").fadeIn(1000);
            $(".model-container").fadeIn(1000);
            showShade();
            $(".queryuser").show();
            $(".updateuser").hide();
            $(".adduser").hide();
            $(".deleteUser").hide();
            showShade();
        });


        //点击span关闭
        $(".title>span,.shade").bind("click", function () {
            $(".shade").fadeOut(1000);
            $(".model-container").fadeOut(1000);
        });


        //居中显示
        function showShade() {
            var $vW = $(window).width();
            var $w = $(".model-container").outerWidth();
            var $vH = $(window).height();
            var $h = $(".model-container").outerHeight();
            $(".model-container").css({
                "left": ($vW - $w) / 2.1 + "px",
                "top": ($vH - $h) / 2.5 + "px"
            });
        };
        $(document).keyup(function (ev) {
            //                alert(ev.keyCode);  获取esc的键码27
            if (ev.keyCode == 27) {
                //                    $("span").click();
                //模拟事件
                $("span").trigger("click");
            }
        })
    })


    //    关闭模态框
    $(".cancel").click(function () {
        $(".shade").fadeOut(1000);
        $(".model-container").fadeOut(1000);
    });
</script>
</body>

</html>